<template>
  <a-popover>
    <div class="text-limit fl" :style="{ maxWidth: rowsWidth + 'px' }"><slot></slot></div>
    <template #content>
      <p :style="{ maxWidth: maxWidth + 'px' }"><slot></slot></p>
    </template>
  </a-popover>
</template>

<script lang="ts" setup>
  import { defineComponent } from 'vue'
  const props = defineProps({
    rowsWidth: {
      type: Number,
      default: 110,
    },
    maxWidth: {
      type: [Number, String],
      default: 400,
    },
  })
</script>
<script lang="ts">
  export default defineComponent({
    name: 'TextHidden',
  })
</script>

<style lang="less" scoped>
  .arco-typography {
    margin-bottom: 0;
    word-wrap: break-word;
  }
</style>
